<template>
	<view class="btn-recorder flex flex-col justify-center items-center" v-if="!isRecording" @click="handleRecord">
		<ImageBoxVue src="/static/icons/recorder.png" width="48rpx" height="48rpx"></ImageBoxVue>
		<text class="text-sm text-white mt-10">录音</text>
	</view>
	<view class="btn-recorder-submit flex flex-col justify-center items-center" v-else @click="handleRecord">
		<view class="icon_voice" v-if="isRecording"></view>
		<ImageBoxVue v-else src="/static/icons/ripple.png" width="45rpx" height="37rpx"></ImageBoxVue>
		<text class="text-sm text-white mt-10">完成</text>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import indexApi from '@/apis/apiList/indexApi'
	const recorderManager = uni.getRecorderManager()
	const showPopup = ref(null)
	const isRecording = ref(false)
	const recordList = ref([])
	const recordTimer = ref(null)
	const audioTime = ref(0)
	// 开始录音
	const startRecord = () => {
		audioTime.value = 0
		recorderManager.start({
			format: 'mp3',
			duration: 600000
		})
		// showPopup.value.open()
		isRecording.value = true

		// 录音超时自动停止
		recordTimer.value = setInterval(() => {
			audioTime.value += 1
			console.log(audioTime.value);
			if (audioTime.value > 60) stopRecord()
		}, 1000)
	}

	// 停止录音
	const stopRecord = () => {
		recorderManager.stop()
		clearInterval(recordTimer.value)
		isRecording.value = false
		// showPopup.value.close()
	}

	// 取消录音
	const cancelRecord = () => {
		recorderManager.stop()
		// uni.showToast({
		// 	title: '已取消录音',
		// 	icon: 'none'
		// })
		clearInterval(recordTimer.value)
		isRecording.value = false
		// showPopup.value.close()
	}

	const handleRecord = () => {
		if (isRecording.value) {
			stopRecord()
		} else {
			startRecord()
		}
	}

	// 触摸事件处理
	const handleTouchStart = () => {
		startRecord()
	}

	const handleTouchEnd = () => {
		if (isRecording.value) stopRecord()
	}

	const handleTouchCancel = () => {
		if (isRecording.value) cancelRecord()
	}
	const emits = defineEmits(['createCustomMessage'])
	// 录音回调
	recorderManager.onStop((res) => {
		console.log(res);
		if (res.tempFilePath) {
			const params = {
				filePath: res.tempFilePath,
				name: 'file',
			}
			indexApi.upLoadImage(params).then(res => {
				const val = {
					data: 'audio',
					description: `${res.data.url}`,
					extension: `${audioTime.value}`
				}
				console.log(val);
				emits('createCustomMessage', val)
			})
			// recordList.value.unshift({
			// 	path: res.tempFilePath,
			// 	duration: Math.floor(res.duration / 1000)
			// })
		}
	})

	recorderManager.onError((err) => {
		console.error('录音错误:', err)
		uni.showToast({
			title: '录音失败',
			icon: 'none'
		})
	})

	// 删除录音
	const deleteRecord = (index) => {
		uni.removeSavedFile({
			filePath: recordList.value[index].path,
			complete: () => {
				recordList.value.splice(index, 1)
			}
		})
	}
</script>

<style lang="scss" scoped>
	.btn-recorder,
	.btn-recorder-submit {
		background: url('/static/user/bg_voice.png') no-repeat;
		background-size: cover;
		width: 124rpx;
		height: 220rpx;
		margin-left: 24rpx;
	}

	.btn-recorder-submit {

		.icon_voice {
			animation-name: example;
			/* 引用上面定义的@keyframes */
			animation-duration: 2s;
			/* 动画持续时间 */
			animation-iteration-count: infinite;
			/* 无限循环 */
			background: url(/static/icons/ripple3.png) no-repeat;
			background-size: contain;
			width: 45rpx;
			height: 37rpx;
		}

		@keyframes example {
			0% {
				background: url(/static/icons/ripple3.png) no-repeat;
				background-size: contain;
				width: 45rpx;
				height: 37rpx;
			}

			50% {
				background: url(/static/icons/ripple2.png) no-repeat;
				background-size: contain;
				width: 45rpx;
				height: 37rpx;
			}

			100% {
				background: url(/static/icons/ripple.png) no-repeat;
				background-size: cover;
				width: 45rpx;
				height: 37rpx;
			}
		}
	}
</style>